// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'

import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import HomeMessage from '../pages/HomeMessage.vue'
import HomeNews from '../pages/HomeNews.vue'
import Detail from '../pages/Detail.vue'
// 创建并暴露一个路由器
const router =  new VueRouter({
  routes:[
    {
      name:'guanyu',
      path:'/about',
      component:About,
      meta:{title:'关于'},
    },
    {
      name:'zhuye',
      path:'/home',
      component:Home,
      meta:{title:'主页'},
      children:[
        {
          name:'News',
          path:'news',
          component:HomeNews,
          meta:{title:'新闻',isAuth:true},
        },
        {
          name:'Message',
          path:'message',
          component:HomeMessage,
          meta:{title:'消息',isAuth:true},
          children:[
            {
              name:'xiangqing',
              path:'detail/:id/:title',
              component:Detail,
              // props的【对象写法】，该对象中的key-value都会以props的形式传递给detail组件---第一种写法
              // props:{a:'111',b:'对象写法'},
              
              // props的【布尔值写法】，若值为真，则会把该路由组件收到的所有params参数以props的形式传递给detail组件(不会影响query参数)---第二种写法
              // props:true

              // props的【函数写法】，值为函数,接受的参数为$route，可以直接解构或连续解构赋值取出数据
              props($route){
                return {id:$route.params.id,title:$route.params.title}
              },
              // 简化写法
              // props({params:{id,title}}){
              //   return {id:id,title:title}
              // }
            }
          ]
        },
      ]
    },   
  ],
})

// 【全局前置路由守卫】---初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
  // to---跳转的终点路由组件对象
  // from---跳转的起点路由组件对象
  // next---一个函数，用来放行

  // 通过to.path进行判断
  // if(to.path === '/home/news' || to.path === '/home/message'){

  //通过to.name进行判断
  // if(to.name === 'Message' || to.name === 'News'){

  //通过在路由配置里定义的【meta路由元信息】isAuth进行判断
  console.log('前置路由守卫',to,from)
  if(to.meta.isAuth){
    if(localStorage.getItem('school') === 'atguigu') {
      next()
    }else{
      alert('权限不足，无权访问')
    }
  }else{
    next()
  }
})

// 【全局后置路由守卫】---初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
  // 此处没有next参数
  console.log('后置路由守卫',to,from)

  document.title = to.meta.title || '学习Vue'

  // if(to.meta.isAuth){
  //   if(localStorage.getItem('school') === 'atguigu') {
  //     next()
  //   }else{
  //     alert('权限不足，无权访问')
  //   }
  // }else{
  //   next()
  // }
})

export default router